<script lang="ts" setup>
import {
	// defineComponent,
	provide,
	ref
} from 'vue'
import RefReactiveDemo from './components/RefReactiveDemo.vue'
import ComputedDemo from './components/ComputedDemo.vue'
import WatchDemo from './components/WatchDemo.vue'
import LifecycleDemo from './components/LifecycleDemo.vue'
import PropsEventsDemo from './components/PropsEventsDemo.vue'
import CompositionAPIDemo from './components/CompositionAPIDemo.vue'
import SetupDemo from './components/SetupDemo.vue'
import { langKey } from './keys'

const onChange = (hidden: boolean) => {
	document.title = hidden ? '年龄被隐藏了~' : '年龄显示出来了'
}

const lang = ref('zh')
const changeLang = (type: string) => {
	lang.value = type
}
provide(langKey, lang)
// export default defineComponent({
// 	name: 'App',
// 	components: {
// 		RefReactiveDemo,
// 		ComputedDemo,
// 		WatchDemo,
// 		LifecycleDemo,
// 		PropsEventsDemo,
// 		CompositionAPIDemo,
// 		SetupDemo
// 	},
// 	setup() {
// 		const onChange = (hidden: boolean) => {
// 			document.title = hidden ? '年龄被隐藏了~' : '年龄显示出来了'
// 		}

// 		return { onChange }
// 	}
// })
</script>

<template>
	<h1>ref reactive demo</h1>
	<RefReactiveDemo />
	<hr />
	<h1>computed demo</h1>
	<ComputedDemo />
	<hr />
	<h1>Watch Demo</h1>
	<WatchDemo />
	<hr />
	<h1>LifecycleDemo</h1>
	<LifecycleDemo />
	<hr />
	<h1>PropsDemo</h1>
	<PropsEventsDemo
		name="李子一"
		:age="31"
		:user="{ name: 'liziyi', age: 31 }"
		@change="onChange"
	/>
	<hr />
	<h1>CompositionAPIDemo</h1>
	<CompositionAPIDemo />
	<hr />
	<h1>SetupDemo</h1>
	<SetupDemo @change="onChange" />
	<div>
		<button @click="changeLang('en')">en</button>
		<button @click="changeLang('zh')">zh</button>
	</div>
</template>

<style scoped>
.logo {
	height: 6em;
	padding: 1.5em;
	will-change: filter;
	transition: filter 300ms;
}
.logo:hover {
	filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
	filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
